<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>trm</title>
  <style>
    * {
        margin: 0;
        padding: 0;
    }
    html {
        height: 100%;
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    table {
        border-collapse: collapse;
        text-align: center;
    }
    table td {
        border:1px solid black;
    }
    .top {
        width: 100%;
        position: absolute;
        z-index: 99999;
        background: #1E90FF;
    }
    .head {
        //height:10%;
        max-width: 2000px;
        margin: 0 auto;
        //background: url(img/login.jpg);
        height: 50px;
    }
    .head div {
        //height: 50px;
    }
    .systemName {
        display: inline-block;
        float: left;
        width: 230px;
        height: 50px;
        //background:red;
        text-align: center;
        color: yellow;
        font-size: 30px;
        line-height: 50px;
        display:none;
    }
    .menu {
        width: 20%;
        display: inline-block;
        float: left;
        height: 50px;
        //margin-top: 10px;
        margin-left: 30px;
        color : #fff;
        //font-size: 50px;
    }
    .selectMenu {
        display: inline-block;
        background: #ffffff;
        border: 1px solid #CD96CD;
        width: 100%;
        height: 30px;
        margin-top: 10px;
        text-align: center;
        color: #1E90FF;
        line-height:30px;
        font-weight: bolder;
    }
    .selectMenu:hover{
        background: #C4C4C4;
        color: #FFFFFF;
        cursor: default;
    }
    #menuList {
        display: none;
        width: 100%;
        background: #ffffff;
        //background: #C4C4C4;
        border: 1px solid #CD96CD;
        position: relative;
        top: -1px;
        color: #1E90FF;
    }
    #menuList li {
        margin-top:-1px;
        list-style: none;
        text-align: center;
        border-top: 1px dashed #CD96CD;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        font-size: 20px;
    }
    #menuList li:hover {
        background: #7AC5CD;
        color: #fff;
    }
    .user {
        //display: inline-block;
        float: right;
        padding-right:20px;
        //line-height: 50px;
        text-align:right;
        color: white;
        line-height: 50px;
    }
    .right {
        //background: red;
        z-index: 99998;
        position: fixed;
        top: 0;
        box-sizing:border-box;
        width: 100%;
        height: 100%;
        padding-top: 50px;
    }
    .manager {
        display: none;
    }
  </style>
  <script type="text/javascript" src="/trm/javascript/jquery-3.2.1.js"></script>
  <script>
    $(function(){
    	//$(".left").css("left", $(".selectMenu").offset().left);
    	$(".selectMenu").mouseover(function(){
    		$("#menuList").slideDown();
    		//$("#menuList").show();
    	});
    	$(".menu").mouseleave(function(){
            $("#menuList").hide();
        });
    	var homepage = "${user.homepage}";
    	if (homepage == null || homepage == "" || "userInfo" == homepage) {
    	   userInfo();
        } else if (homepage == "manager") {
        	manager();
        } else {
        	
        }
    });
    function showMenu() {
    	alert();
    }
    function userInfo() {
    	document.getElementById("main").src = "StudentServlet?action=edit&role=${user.role}&id=${user.id}&type=self";
    	$("#curMenu").html("个人信息");
        $("#menuList").hide();
    }
    function userList(roleid, role) {
    	document.getElementById("main").src = "StudentServlet?role=" + roleid;
    	$("#curMenu").html(role + "信息");
    	$("#menuList").hide();
    }
    function manager() {
    	document.getElementById("main").src = "manager/manager.jsp";
    	$("#curMenu").html("系统管理");
    	$("#menuList").hide();
    }
    function modifyPassword() {
    	document.getElementById("main").src = "UserServlet?action=modifyPassword";
    }
  </script>
</head>
<body>
  <div class="top">
  <div class="head">
    <div class="systemName">trm</div>
    <div class="menu">
      <div class="selectMenu">
        <span id="curMenu">${curMenu}</span>
      </div>
      <div class="roleList">
        <ul id="menuList">
          <li onclick="userInfo();"><a>个人信息</a></li>
	      <c:forEach var="role" items="${list}">
	        <li onclick="userList('${role.id}', '${role.role}');"><a>${role.role}信息</a></li>
	      </c:forEach>
	      <c:if test="${fn:contains(role, 'x;')}">
	        <li onclick="manager();"><a>系统管理</a></li>
	      </c:if>
        </ul>
      </div>
    </div>
    <div class="user"><a>欢迎，${user.name}</a> &nbsp;&nbsp;<a style="color:white" href="LoginServlet?action=exit">退出</a></div>
    <!-- 
    <div class="user"><a onclick="modifyPassword();" style="text-decoration:underline;cursor:pointer;">修改密码</a></div>
    -->
  </div>
  </div>
  <div class="right">
    <!--  -->
    <iframe id="main" src="${mainSrc }" style="border:0;width:100%;height:100%;"></iframe>
    
    <!-- <iframe id="main" src="StudentServlet?role=2" style="border:0;width:100%;height:100%;"></iframe>
     -->
  </div>
</body>
</html>